<template>
  <div class="digital-human-display">
    <!-- 顶部搜索和筛选区域 -->
    <div class="top-filter-container">
      <!-- 搜索区域 -->
      <div class="search-container">
        <t-input
          v-model="state.search"
          :placeholder="$t('common.commonModelList.searchPlaceholder')"
          class="search-input"
          @enter="action.search"
        >
          <template #suffix>
            <t-icon name="search" @click="action.search" />
          </template>
        </t-input>
      </div>

      <!-- 语言筛选下拉框 -->
<!--      <div class="language-filter">-->
<!--        <t-select-->
<!--          v-model="state.filter.language"-->
<!--          :placeholder="$t('common.commonModelList.languageFilterPlaceholder', '选择语言')"-->
<!--          clearable-->
<!--          @change="action.filterByLanguage"-->
<!--        >-->
<!--          <t-option-->
<!--            v-for="lang in languageOptions"-->
<!--            :key="lang.code"-->
<!--            :value="lang.code"-->
<!--            :label="$t(`common.languages.${lang.code}`, lang.name)"-->
<!--          />-->
<!--        </t-select>-->
<!--      </div>-->
    </div>

    <!-- 分类筛选区域 - 重新设计 -->
    <div class="category-filter-container">
      <div class="filter-header">
        <span class="filter-title">{{ $t('common.commonModelList.categoryFilter', '分类筛选') }}</span>
        <t-button
          v-if="hasCategoryFilter"
          variant="text"
          size="small"
          @click="action.clearCategoryFilter"
        >
          {{ $t('common.commonModelList.clearFilter', '清除筛选') }}
        </t-button>
      </div>

      <div class="category-tabs">
        <!-- 一级分类标签页 -->
        <t-tabs v-model="state.activeTabId" @change="action.onTabChange">
          <t-tab-panel
            :value="0"
            :label="$t('common.commonModelList.allCategories', '全部')"
          />
          <t-tab-panel
            v-for="category in state.categories"
            :key="category.id"
            :value="category.id"
            :label="category.name"
          />
        </t-tabs>

        <!-- 二级和三级分类 -->
        <div class="subcategory-container" v-if="state.activeTabId && state.activeTabId !== 0">
          <div class="subcategory-row">
            <div
              class="subcategory-item"
              :class="{ active: !state.filter.secondaryCategoryId }"
              @click="action.selectSecondaryCategory(null)"
            >
              {{ $t('common.commonModelList.allSubcategories', '全部') }}
            </div>
            <div
              v-for="subcat in activeSecondaryCategories"
              :key="subcat.id"
              class="subcategory-item"
              :class="{ active: state.filter.secondaryCategoryId === subcat.id }"
              @click="action.selectSecondaryCategory(subcat.id)"
            >
              {{ subcat.name }}
            </div>
          </div>

          <!-- 三级分类 -->
          <div class="subcategory-row" v-if="state.filter.secondaryCategoryId && activeTertiaryCategories.length > 0">
            <div
              class="subcategory-item tertiary"
              :class="{ active: !state.filter.tertiaryCategoryId }"
              @click="action.selectTertiaryCategory(null)"
            >
              {{ $t('common.commonModelList.allSubcategories', '全部') }}
            </div>
            <div
              v-for="tertiary in activeTertiaryCategories"
              :key="tertiary.id"
              class="subcategory-item tertiary"
              :class="{ active: state.filter.tertiaryCategoryId === tertiary.id }"
              @click="action.selectTertiaryCategory(tertiary.id)"
            >
              {{ tertiary.name }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数字人展示区域 -->
    <t-loading :loading="state.loading">
      <div class="model-grid">
        <div
          class="model-card"
          v-for="model in state.models"
          :key="model.id"
          @mouseenter="action.showModelActions(model.id)"
          @mouseleave="action.hideModelActions(model.id)"
        >
          <!-- 数字人预览图片 -->
          <div class="model-preview">
            <video :src="model.videoUrl" class="model-thumbnail" preload="metadata" playsinline muted/>

            <!-- 悬停时显示的操作按钮 -->
            <div class="model-actions" v-show="model.id === state.hoveredModelId">
              <div class="action-buttons">
                <t-button class="preview-button" @click="action.previewModel(model)">
                  <t-icon name="play-circle" />
                  {{ $t('common.commonModelList.previewVideo', '预览视频') }}
                </t-button>
                <t-button theme="primary" @click="action.editModel(model)">
                  <t-icon name="edit" />
                  {{ $t('common.commonModelList.editModel', '编辑数字人') }}
                </t-button>
                <t-button theme="danger" @click="action.confirmDelete(model)">
                  <t-icon name="delete" />
                  {{ $t('common.commonModelList.deleteModel', '删除数字人') }}
                </t-button>
                <t-button theme="primary" @click="action.batchProcess('common')">
                  {{ $t('common.commonModelList.goBatchProcess', '去批量中英处理') }}
                </t-button>
                <t-button theme="primary" @click="action.batchProcess2('common')">
                  {{ $t('common.commonModelList.goBatchProcess2', '去批量小语种处理') }}
                </t-button>
              </div>
            </div>
          </div>

          <!-- 数字人信息 -->
          <div class="model-info">
            <div class="model-name">{{ model.name }}</div>
            <div class="model-id">ID: {{ model.id }}</div>
            <div class="model-meta">
              <div class="model-category">{{ model.categoryPath }}</div>
<!--              <div class="model-language" v-if="model.language">-->
<!--                <t-tag size="small" theme="primary" variant="light">-->
<!--                  {{ $t(`common.languages.${model.language}`, getLanguageName(model.language)) }}-->
<!--                </t-tag>-->
<!--              </div>-->
            </div>
            <div class="model-date">{{ formatDate(model.createTime) }}</div>
          </div>
        </div>

        <!-- 没有数据时显示空状态 -->
        <div class="empty-state" v-if="state.models.length === 0 && !state.loading">
          <t-icon name="file-unknown" size="large" />
          <div class="empty-text">{{ $t('common.commonModelList.noModelsFound') }}</div>
        </div>
      </div>
    </t-loading>

    <!-- 分页控件 -->
    <div class="pagination-container">
      <t-pagination
        v-model="state.pagination.current"
        :total="state.pagination.total"
        :page-size="state.pagination.pageSize"
        :page-size-options="[12, 24, 48]"
        show-total
        show-page-size
        @change="action.onPageChange"
        @page-size-change="action.onPageSizeChange"
      />
    </div>

    <!-- 编辑数字人弹窗 -->
    <t-dialog
      v-model:visible="state.editDialog.visible"
      :header="state.editDialog.title"
      width="500px"
      class="edit-dialog"
      @close="action.closeEditDialog"
    >
      <div class="edit-form">
        <t-form ref="editForm" :data="state.editDialog.formData">
          <t-form-item label="数字人名称" name="name">
            <t-input v-model="state.editDialog.formData.name" placeholder="请输入数字人名称"/>
          </t-form-item>

          <!-- 分类选择 -->
          <t-form-item label="一级分类" name="primaryCategoryId">
            <t-select
              v-model="state.editDialog.formData.primaryCategoryId"
              placeholder="请选择一级分类"
              @change="action.onEditPrimaryCategoryChange"
            >
              <t-option
                v-for="category in state.categories"
                :key="category.id"
                :value="category.id"
                :label="category.name"
              />
            </t-select>
          </t-form-item>

          <t-form-item label="二级分类" name="secondaryCategoryId">
            <t-select
              v-model="state.editDialog.formData.secondaryCategoryId"
              placeholder="请选择二级分类"
              :disabled="!state.editDialog.formData.primaryCategoryId"
              @change="action.onEditSecondaryCategoryChange"
            >
              <t-option
                v-for="category in editSecondaryCategories"
                :key="category.id"
                :value="category.id"
                :label="category.name"
              />
            </t-select>
          </t-form-item>

          <t-form-item label="三级分类" name="tertiaryCategoryId">
            <t-select
              v-model="state.editDialog.formData.tertiaryCategoryId"
              placeholder="请选择三级分类"
              :disabled="!state.editDialog.formData.secondaryCategoryId"
            >
              <t-option
                v-for="category in editTertiaryCategories"
                :key="category.id"
                :value="category.id"
                :label="category.name"
              />
            </t-select>
          </t-form-item>
        </t-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <t-button theme="default" variant="outline" @click="action.closeEditDialog">
            {{ $t('common.button.cancel', '取消') }}
          </t-button>
          <t-button theme="primary" @click="action.saveModelChanges" :loading="state.saveLoading">
            {{ $t('common.button.save', '保存') }}
          </t-button>
        </div>
      </template>
    </t-dialog>

    <!-- 视频预览弹窗 -->
    <t-dialog
      v-model:visible="state.previewDialog.visible"
      :header="state.previewDialog.title"
      width="650px"
      class="preview-dialog"
      @close="closeDialog"
    >
      <div class="preview-content">
        <video v-if="state.previewDialog.model" class="preview-video" controls autoplay>
          <source :src="state.previewDialog.model.videoUrl" type="video/mp4">
          您的浏览器不支持视频标签
        </video>
        <div class="model-details" v-if="state.previewDialog.model">
          <div class="detail-item">
            <span class="label">{{ $t('common.commonModelList.modelName') }}:</span>
            <span class="value">{{ state.previewDialog.model.name }}</span>
          </div>
          <div class="detail-item">
            <span class="label">ID:</span>
            <span class="value">{{ state.previewDialog.model.id }}</span>
          </div>
          <div class="detail-item">
            <span class="label">{{ $t('common.commonModelList.category') }}:</span>
            <span class="value">{{ state.previewDialog.model.categoryPath }}</span>
          </div>
<!--          <div class="detail-item" v-if="state.previewDialog.model.language">-->
<!--            <span class="label">{{ $t('common.commonModelList.language') }}:</span>-->
<!--            <span class="value">{{ $t(`common.languages.${state.previewDialog.model.language}`, getLanguageName(state.previewDialog.model.language)) }}</span>-->
<!--          </div>-->
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <t-button theme="default" variant="outline" @click="closeDialog()">
            {{ $t('common.button.close') }}
          </t-button>
        </div>
      </template>
    </t-dialog>

    <!-- 删除确认对话框 -->
    <t-dialog
      v-model:visible="state.deleteDialog.visible"
      header="确认删除"
      width="400px"
      @close="state.deleteDialog.visible = false"
    >
      <div class="delete-confirm-content">
        <t-icon name="delete" class="warning-icon" />
        <p>{{ $t('common.commonModelList.deleteConfirmText', '确定要删除数字人') }} "{{ state.deleteDialog.modelName }}" 吗？此操作不可恢复。</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <t-button theme="default" @click="state.deleteDialog.visible = false">
            {{ $t('common.button.cancel', '取消') }}
          </t-button>
          <t-button theme="danger" @click="action.deleteModel">
            {{ $t('common.button.delete', '删除') }}
          </t-button>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { MessagePlugin } from 'tdesign-vue-next'
import { useRouter } from 'vue-router'
import { getCommonModelList, getCategoryTree, getSubCategories, getIP, updateDigitalHuman, deleteDigitalHuman } from '@renderer/api'

const { t } = useI18n()
const router = useRouter()

// 语言选项
const languageOptions = [
  { code: 'vi', name: '越南语' },
  { code: 'id', name: '印尼语' },
  { code: 'ms', name: '马来语' },
  { code: 'th', name: '泰语' },
  { code: 'zh', name: '中文' },
  { code: 'en', name: '英语' },
  { code: 'de', name: '德语' },
  { code: 'fr', name: '法语' },
  { code: 'ja', name: '日语' }
]

const state = reactive({
  saveLoading: false,
  loading: false,
  search: '',
  base_url: '',
  models: [],
  categories: [],
  hoveredModelId: null,
  activeTabId: 0, // 当前激活的一级分类标签页
  filter: {
    primaryCategoryId: null,
    secondaryCategoryId: null,
    tertiaryCategoryId: null,
    language: null // 新增语言筛选条件
  },
  pagination: {
    current: 1,
    total: 0,
    pageSize: 12
  },
  previewDialog: {
    visible: false,
    title: '预览数字人',
    model: null
  },
})

state.editDialog = {
  visible: false,
  title: '编辑数字人',
  formData: {
    id: null,
    name: '',
    primaryCategoryId: null,
    secondaryCategoryId: null,
    tertiaryCategoryId: null
  }
};

state.deleteDialog = {
  visible: false,
  modelId: null,
  modelName: ''
};

const closeDialog = () => {
  state.previewDialog.visible = false
  setTimeout(() => {
    state.previewDialog.model = null;
  }, 300);
}

const editSecondaryCategories = computed(() => {
  if (!state.editDialog.formData.primaryCategoryId) return [];
  const activeCategory = state.categories.find(c => c.id === state.editDialog.formData.primaryCategoryId);
  return activeCategory ? activeCategory.children : [];
});

const editTertiaryCategories = computed(() => {
  if (!state.editDialog.formData.secondaryCategoryId) return [];
  const activeCatIdx = state.categories.findIndex(c => c.id === state.editDialog.formData.primaryCategoryId);
  if (activeCatIdx === -1) return [];

  const activeSubCat = state.categories[activeCatIdx].children.find(
    sc => sc.id === state.editDialog.formData.secondaryCategoryId
  );
  return activeSubCat ? activeSubCat.children : [];
});

// 计算是否有分类筛选条件
const hasCategoryFilter = computed(() => {
  return state.filter.primaryCategoryId || state.filter.secondaryCategoryId || state.filter.tertiaryCategoryId;
})

// 计算当前激活的二级分类列表
const activeSecondaryCategories = computed(() => {
  if (!state.activeTabId || state.activeTabId === 0) return [];
  const activeCategory = state.categories.find(c => c.id === state.activeTabId);
  return activeCategory ? activeCategory.children : [];
})

// 计算当前激活的三级分类列表
const activeTertiaryCategories = computed(() => {
  if (!state.filter.secondaryCategoryId) return [];
  const activeCatIdx = state.categories.findIndex(c => c.id === state.activeTabId);
  if (activeCatIdx === -1) return [];

  const activeSubCat = state.categories[activeCatIdx].children.find(
    sc => sc.id === state.filter.secondaryCategoryId
  );
  return activeSubCat ? activeSubCat.children : [];
})

const action = {
  // 显示删除确认对话框
  confirmDelete(model) {
    state.deleteDialog.modelId = model.id;
    state.deleteDialog.modelName = model.name;
    state.deleteDialog.visible = true;
  },
  // 执行删除操作
  async deleteModel() {
    try {
      state.loading = true;

      // 调用删除API
      await deleteDigitalHuman(state.deleteDialog.modelId);

      // 成功后关闭对话框并刷新列表
      MessagePlugin.success(t('common.message.deleteSuccess', '删除成功'));
      state.deleteDialog.visible = false;
      await action.loadModels();
    } catch (err) {
      console.error('删除数字人失败:', err);
      MessagePlugin.error(t('common.message.deleteFailed', '删除失败: ' + (err.message || '未知错误')));
    } finally {
      state.loading = false;
    }
  },

  closeEditDialog() {
    state.editDialog.visible = false;
  },

  editModel(model) {
    // 填充表单数据
    state.editDialog.formData = {
      id: model.id,
      name: model.name,
      primaryCategoryId: model.primaryCategoryId,
      secondaryCategoryId: model.secondaryCategoryId,
      tertiaryCategoryId: model.tertiaryCategoryId
    };
    state.editDialog.title = `编辑数字人 - ${model.name}`;
    state.editDialog.visible = true;
  },

  onEditPrimaryCategoryChange() {
    // 重置二级和三级分类
    state.editDialog.formData.secondaryCategoryId = null;
    state.editDialog.formData.tertiaryCategoryId = null;
  },

  onEditSecondaryCategoryChange() {
    // 重置三级分类
    state.editDialog.formData.tertiaryCategoryId = null;
  },

  async saveModelChanges() {
    try {
      state.saveLoading = true;

      // 构建要保存的数据
      const modelData = {
        id: state.editDialog.formData.id,
        name: state.editDialog.formData.name,
        primaryCategoryId: state.editDialog.formData.primaryCategoryId,
        secondaryCategoryId: state.editDialog.formData.secondaryCategoryId,
        tertiaryCategoryId: state.editDialog.formData.tertiaryCategoryId
      };

      // 发起API请求保存数据
      await updateDigitalHuman(modelData);

      // 成功后关闭弹窗并刷新列表
      MessagePlugin.success(t('common.message.updateSuccess', '更新成功'));
      state.editDialog.visible = false;
      action.loadModels();
    } catch (err) {
      console.error('更新数字人失败:', err);
      MessagePlugin.error(t('common.message.updateFailed', '更新失败'));
    } finally {
      state.saveLoading = false;
    }
  },

  async init() {
    try {
      // 加载服务器配置
      await action.loadAssetPaths();

      // 加载分类数据
      await action.loadCategories();

      // 加载模特列表
      await action.loadModels();

    } catch (err) {
      console.error('初始化数字人列表失败:', err);
      MessagePlugin.error(t('common.message.initCommonModelListFailed'));
    }
  },

  async loadCategories() {
    try {
      state.loading = true;
      const response = await getCategoryTree();

      if (!response || !response.data) {
        throw new Error('获取分类数据失败');
      }

      state.categories = await Promise.all(
        response.data.map(async category => {
          const subResponse = await getSubCategories(category.id);
          const subCategories = await Promise.all(
            subResponse.data.map(async subCategory => {
              const thirdResponse = await getSubCategories(subCategory.id); // 加载三级分类
              return {
                id: subCategory.id,
                name: subCategory.name,
                children: thirdResponse.data || []
              };
            })
          );

          return {
            id: category.id,
            name: category.name,
            children: subCategories
          };
        })
      );
    } catch (err) {
      console.error('加载分类失败:', err);
      MessagePlugin.error(t('common.message.loadCategoriesError'));
    } finally {
      state.loading = false;
    }
  },

  async loadModels() {
    try {
      // 如果资源路径未加载，先加载资源路径
      if (!state.assetPaths) {
        await action.loadAssetPaths();
      }

      state.loading = true;

      const params = {
        page: state.pagination.current,
        pageSize: state.pagination.pageSize,
        name: state.search,
        primaryCategoryId: state.filter.primaryCategoryId,
        secondaryCategoryId: state.filter.secondaryCategoryId,
        tertiaryCategoryId: state.filter.tertiaryCategoryId,
        language: state.filter.language // 添加语言筛选参数
      };

      const response = await getCommonModelList(params);

      if (!response || !response.data) {
        throw new Error('获取数字人列表失败');
      }

      state.models = response.data.records.map(model => ({
        id: model.id,
        name: model.name,
        videoPath: model.videoPath,
        audioPath: model.audioPath,
        imagePath: generateVideoUrl(model.imagePath),
        voiceId: model.voiceId,
        videoUrl: generateVideoUrl(model.videoPath),
        categoryPath: buildCategoryPath(model),
        primaryCategoryId: model.primaryCategoryId,
        secondaryCategoryId: model.secondaryCategoryId,
        tertiaryCategoryId: model.tertiaryCategoryId,
        primaryCategoryName: model.primaryCategoryName,
        secondaryCategoryName: model.secondaryCategoryName,
        tertiaryCategoryName: model.tertiaryCategoryName,
        language: model.language, // 新增语言字段
        createTime: model.createTime || new Date().toISOString()
      }));

      state.pagination.total = response.data.total;
    } catch (err) {
      console.error('加载数字人列表失败:', err);
      MessagePlugin.error(t('common.message.loadCommonModelsError'));
    } finally {
      state.loading = false;
    }
  },

  async loadAssetPaths() {
    state.loading = true;
    try {
      const result = await getIP();
      state.base_url = result.base_url;
    } catch (error) {
      console.error('加载资源路径失败:', error);
      MessagePlugin.error('加载资源路径失败: ' + (error.message || '未知错误'));
    } finally {
      state.loading = false;
    }
  },

  search() {
    // 重置分页到第一页
    state.pagination.current = 1;
    action.loadModels();
  },

  // 按语言筛选
  filterByLanguage(language) {
    state.filter.language = language;
    // 重置分页到第一页
    state.pagination.current = 1;
    action.loadModels();
  },

  // 标签页切换
  onTabChange(tabId) {
    if (tabId === 0) {
      // 选择全部分类，清除所有分类筛选条件
      state.filter.primaryCategoryId = null;
      state.filter.secondaryCategoryId = null;
      state.filter.tertiaryCategoryId = null;
    } else {
      // 选择特定分类，设置一级分类ID，清除二三级分类ID
      state.filter.primaryCategoryId = tabId;
      state.filter.secondaryCategoryId = null;
      state.filter.tertiaryCategoryId = null;
    }
    // 重置分页到第一页并加载数据
    state.pagination.current = 1;
    action.loadModels();
  },

  // 选择二级分类
  selectSecondaryCategory(categoryId) {
    state.filter.secondaryCategoryId = categoryId;
    state.filter.tertiaryCategoryId = null;
    // 重置分页到第一页并加载数据
    state.pagination.current = 1;
    action.loadModels();
  },

  // 选择三级分类
  selectTertiaryCategory(categoryId) {
    state.filter.tertiaryCategoryId = categoryId;
    // 重置分页到第一页并加载数据
    state.pagination.current = 1;
    action.loadModels();
  },

  // 清除所有分类筛选条件
  clearCategoryFilter() {
    state.activeTabId = 0;
    state.filter.primaryCategoryId = null;
    state.filter.secondaryCategoryId = null;
    state.filter.tertiaryCategoryId = null;
    // 重置分页到第一页并加载数据
    state.pagination.current = 1;
    action.loadModels();
  },

  onPageChange(pageInfo) {
    state.pagination.current = pageInfo.current;
    action.loadModels();
  },

  onPageSizeChange(pageSize) {
    state.pagination.pageSize = pageSize;
    state.pagination.current = 1;
    action.loadModels();
  },

  // 鼠标悬停时显示操作按钮
  showModelActions(modelId) {
    state.hoveredModelId = modelId;
  },

  // 鼠标离开时隐藏操作按钮
  hideModelActions() {
    state.hoveredModelId = null;
  },

  // 预览模型
  previewModel(model) {
    state.previewDialog.model = model;
    state.previewDialog.title = `${t('common.commonModelList.previewTitle', '预览数字人')} - ${model.name}`;
    state.previewDialog.visible = true;
  },

  // 批量处理
  batchProcess(model) {
    if (!model) return;

    // 跳转到批量处理页面并传递模特ID
    router.push({
      path: '/batch',
      query: {
        common: true
      }
    });

    // 如果弹窗打开，关闭弹窗
    if (state.previewDialog.visible) {
      state.previewDialog.visible = false;
    }
  },

  // 批量处理小语种
  batchProcess2(model) {
    if (!model) return;

    // 跳转到批量处理页面并传递模特ID
    router.push({
      path: '/audio',
      query: {
        common: true
      }
    });

    // 如果弹窗打开，关闭弹窗
    if (state.previewDialog.visible) {
      state.previewDialog.visible = false;
    }
  }
};

// 构建分类路径显示
function buildCategoryPath(model) {
  let path = model.primaryCategoryName || '';

  if (model.secondaryCategoryName) {
    path += ' / ' + model.secondaryCategoryName;

    if (model.tertiaryCategoryName) {
      path += ' / ' + model.tertiaryCategoryName;
    }
  }

  return path;
}

// 生成视频URL
const generateVideoUrl = (videoPath) => {
  if (!videoPath || !state.base_url) return '';
  return `${state.base_url}:9001/face2face/temp/` + videoPath;
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
}

onMounted(() => {
  action.init();
});

</script>

<style scoped>
/* 删除确认对话框样式 */
.delete-confirm-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.warning-icon {
  font-size: 24px;
  color: #e34d59;
}

.delete-confirm-content p {
  margin: 0;
  font-size: 14px;
  color: #333;
}
/* 编辑弹窗样式 */
.edit-dialog :deep(.t-dialog__body) {
  padding: 20px;
}

.edit-form {
  width: 100%;
}

.edit-form :deep(.t-form__item) {
  margin-bottom: 16px;
}

.edit-form :deep(.t-form__label) {
  font-weight: 500;
}

.digital-human-display {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部搜索和筛选区域 */
.top-filter-container {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.search-container {
  flex: 1;
}

.search-input {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
}

.language-filter {
  width: 200px;
}

/* 分类筛选区域 */
.category-filter-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 16px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.category-tabs :deep(.t-tabs__nav) {
  background-color: transparent;
  border-bottom: 1px solid #e0e0e0;
}

.category-tabs :deep(.t-tabs__nav-item) {
  padding: 12px 20px;
  font-size: 14px;
}

.category-tabs :deep(.t-is-active) {
  color: #0052d9;
}

.subcategory-container {
  padding: 16px 0 8px;
}

.subcategory-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.subcategory-item {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;
}

.subcategory-item:hover {
  background-color: #e6f4ff;
  color: #0052d9;
}

.subcategory-item.active {
  background-color: #0052d9;
  color: white;
}

.subcategory-item.tertiary {
  font-size: 13px;
  background-color: #f0f0f0;
}

/* 数字人展示列表 */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-bottom: 24px;
}

.model-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.model-preview {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.model-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  will-change: transform;
  pointer-events: none;
}

.model-card:hover .model-thumbnail {
  transform: scale(1.05);
}

.model-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.model-card:hover .model-actions {
  opacity: 1;
  pointer-events: auto;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 80%;
}

.preview-button, .batch-button {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.preview-button {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
}

.preview-button:hover {
  background-color: white;
}

.batch-button {
  background-color: #0052d9;
  color: white;
}

.batch-button:hover {
  background-color: #003eb3;
}

.model-info {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.model-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-id {
  font-size: 12px;
  color: #999;
}

.model-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.model-category {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.model-language :deep(.t-tag) {
  background-color: rgba(0, 82, 217, 0.1);
  border-color: rgba(0, 82, 217, 0.3);
  color: #0052d9;
}

.model-date {
  font-size: 12px;
  color: #999;
  margin-top: auto;
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: #999;
}

.empty-text {
  margin-top: 16px;
  font-size: 14px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 预览弹窗样式 */
.preview-dialog :deep(.t-dialog__body) {
  padding: 0;
}

.preview-content {
  display: flex;
  flex-direction: column;
}

.preview-video {
  width: 100%;
  height: auto;
  max-height: 400px;
  background-color: #000;
}

.model-details {
  padding: 16px;
  background-color: #f5f7fa;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-item .label {
  font-weight: 500;
  width: 80px;
  color: #666;
}

.detail-item .value {
  flex: 1;
  color: #333;
  word-break: break-all;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .top-filter-container {
    flex-direction: column;
  }

  .language-filter {
    width: 100%;
    max-width: 300px;
  }

  .model-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .category-tabs :deep(.t-tabs__nav) {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .category-tabs :deep(.t-tabs__nav-item) {
    padding: 12px 16px;
    white-space: nowrap;
  }

  .subcategory-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .subcategory-item {
    white-space: nowrap;
  }

  .action-buttons {
    width: 90%;
  }

  .preview-dialog {
    width: 95% !important;
  }
}

@media screen and (max-width: 480px) {
  .digital-human-display {
    padding: 12px;
  }

  .model-grid {
    grid-template-columns: 1fr;
  }

  .model-preview {
    height: 160px;
  }

  .filter-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
